<!-- 页面代码 -->
<template>
    <div class="loginContainer">
        <h3 class="loginTitle">品优购后台管理系统</h3>
        <a-form
                :model="sysUser"
                name="basic"
                :label-col="{ span: 6 }"
                :wrapper-col="{ span: 16 }"
                autocomplete="off"
        >
            <a-form-item
                    label="用户名"
                    name="username"
            >
                <a-input v-model:value="sysUser.usercode" />
            </a-form-item>
            <a-form-item
                    label="密  码"
                    name="password"
            >
                <a-input-password v-model:value="sysUser.password" />
            </a-form-item>
            <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
                <a-checkbox v-model:checked="checked" class="loginRemember">Remember me</a-checkbox>
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
                <a-button type="primary" html-type="submit" @click="doLogin">登      录</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>
<script lang="ts">
    import { defineComponent,onMounted,ref} from 'vue';
    import axios from "axios";
    import {message,UploadChangeParam} from "ant-design-vue";
    import {Tool} from "@/utils/tool"
    import store from '@/store';
    import { useRouter } from 'vue-router';
    export default {
        name: "Login",
        setup(){
            // 登录
            const sysUser=ref({});
            const router=useRouter();
            const doLogin=()=>{
                axios.post('http://localhost:8899/doLogin', sysUser.value).then((response) => {
                    const data = response.data;

                    if (data.code===200) {
                        message.success("登录成功！");
                        console.log(data.data);
                        //调用store/index.ts  ,注意回调的数据视频具体情况而定
                        //可以以jwt为键
                        store.commit("SET_TOKEN",data.data);
                        router.push('/home');
                    } else {
                        message.error(data.message);
                    }
                });
            };
            return {
                doLogin,
                sysUser

            }
        }
    }
</script>

<style scoped>
    .loginContainer {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 188px auto;
        width: 450px;
        padding: 15px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    .loginTitle {
        margin: 0px auto 20px auto;
        text-align: center;
    }

    .loginRemember {
        text-align: left;
        margin: 0px 0px 15px 0px;
    }

</style>